<!-- 修改个人资料 -->
<template>
	<view class="edit">
		<view class="edit_content">
			<!-- 修改头像 -->
			<view class="head" @click="editHead">
				<view class="circle">
					<img :src="user.head_img" />
				</view>
				<view class="head_name">修改头像</view>
			</view>
			<!-- 信息 -->
			<view class="part">
				<p>用户ID</p>
				<input type="text" disabled="disabled" :value="user.userid">
			</view>
			<view class="part">
				<p>账号</p>
				<input type="text" disabled="disabled" :value="user.account">
			</view>
			<view class="part">
				<p>昵称</p>
				<input  :value="name"   @input="nameInput($event)" type="text" placeholder='请输入昵称'>
			</view>
			<view class="part">
				<p>性别</p>
				<picker @change="bindPickerChange" :value="index" :range="gender">
					<view class="choose_birthday">
						<input :value="six" maxlength="2" type="text" disabled="disabled" placeholder='请选择性别'>
						<img src="/static/img/arrow_right.png" />
					</view>
				</picker>
			</view>
			<view class="part">
				<p>出生年月</p>
				<view class="choose_birthday" @click="show">
					<input :value="birthday" type="text" disabled="disabled" placeholder='请选择出生年月'>
					<img src="/static/img/arrow_right.png" />
				</view>
			</view>
			<!-- 保存 -->
			<view class="button">
				<p @click="save">保存</p>
			</view>
			<!-- 选择出生日期 -->
			<picker-date ref="pickerDate" @sure="sure"></picker-date>
			<!-- 让父标签 0宽 0高 隐藏溢出 -->
			<view style="width:0px;height:0px; overflow:hidden"> 
				<canvas  id="canvas" ></canvas>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		mapMutations,
		mapActions,
		mapState,
		mapGetters
	} from 'vuex';
	export default {
		components: {},
		data() {
			return {
				canvasShow: false,
				index: 0,
				gender_status: 0, // 性别索引
				gender: ['男', '女', '保密'], // 性别数组
				birthday: '',
				name: '',
				six: ''
			};
		},
		watch: {
		},
		computed: {
			...mapState({
				user: state => state.init.user,
			}),
		},
		// 生命周期函數， 当数据发生改变时被触发的 
		methods: {
			nameInput(event){
			  this.name = event.detail.value;
			},
			//修改头像
			editHead() {
				// 取到图片路径;
				// 把图片路径传输给后台
				// #ifdef MP-WEIXIN
				let that = this;
				that.$tools.chooseImage().then(res => {
					let tempFilePaths = res[0]
					let imgList = '';
					that.upload(tempFilePaths)
				})
				// #endif
				// #ifdef MP-ALIPAY
				let that = this;
				that.$tools.chooseImage().then(res => {
					let imagePath = res[0];
					that.$tools.alypayBase64(imagePath).then( res => {
						let base64 = res
						that.uploadApi(base64);
					})
				})
				// #endif
			},
			// 调用接口上传
			uploadApi(val) {
				this.$api('init', {
					tempFilePaths: 'data:image/png;base64,' + val
				}).then(res => {
					this.user.head_img = res.data
				})
			},
			//微信上传图片
			upload(tempFilePaths) {
				let that = this;
				let imgList = '';
				that.$tools.getFileSystemManager(tempFilePaths).then(res => {
					console.log(res,'thenRes');
					imgList = res.data
					that.uploadApi(imgList);
				}).catch(e => {
					console.log(e,'e');
				})
			},
			bindPickerChange: function(e) {
				let a = e.target.value;
				this.six = this.gender[a]
			},
			// 显示选择日期器
			show() {
				this.$refs.pickerDate._data.show = true
			},
			// 子组件选择器确定按钮
			sure(val) {
				this.birthday = val
			},
			// 保存
			save() {
				this.user.birthday = this.birthday;
				this.user.gender = this.six;
				this.user.name = this.name;
				this.$store.dispatch('init/get_user',this.user)
				this.$tools.toast('保存成功',"none",1000)
				setTimeout(() =>{
					uni.switchTab({
						url: "/pages/user_index/index"
					})
				}, 1000);
			}
		},
		beforeCreate() {},
		created() {
			this.birthday = this.user.birthday;
			this.name = this.user.name;
			this.six = this.user.gender;
		},
		beforeMount() {},
		mounted() {
			
		},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";
</style>
